<template>
<div id="foodlist">
    <div class="section category-section">
        <div>
            <div class="tab-bar-box">
                <div class="tab-bar">
                    <ul class="tab-bar-ul">
                        <li class="tab-bar-li" @click="follow()">关注</li>
                        <li class="tab-bar-li on">食谱</li>
                        <li class="tab-bar-li" @click="recommend()">推荐</li>
                        <li class="tab-bar-li" @click="makeup()">时尚美妆</li>
                        <li class="tab-bar-li" @click="life()">生活</li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
              <div class="content-item">
                <div>
                  <div class="search-bar-index">
                    <span class="search-bar-span">
                      <span class="search-bar-text">搜菜名 食材</span>
                    </span>
                  </div>
                  <div class="panel">
                    <div class="faxian-zhanwei-warp">
                      <div class="faxian-zhanwei-item" v-for="food in foodlists" :key="'foodlists'+food.id">
                       <img :src="imgUrl+'/'+food.imgUrl" class="faxian-box-circle">
                        <div class="faxian-box-bottom">{{food.title}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="scroll-box scrollLoad-box">
                    <div>
                      <p class="commonTitle">热门食谱</p>
                      <ul class="item-list">
                        <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.zhuti" alt="" style="height: calc((100vw - 20px) * 0.447761);width:100%" class="pic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">~黄豆焖猪蹄~</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo">
                                  <img :src="assets.ssy" alt="" class="photo">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">随随鱼</span>
                                </div>
                                <div class="readCount">3043143</div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.meat" alt="" style="height: calc((100vw - 20px) * 0.447761);width:100%" class="pic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">毛氏红烧肉</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo">
                                  <img :src="assets.yde" alt="" class="photo">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">缘豆儿</span>
                                </div>
                                <div class="readCount">3347143</div>
                              </div>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.scfish" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title" style="margin-left:130px">酸菜鱼片</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo" style="margin-top:50px">
                                  <img :src="assets.cm" alt="" class="photo" style="margin-left:10px">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">抄母</span>
                                </div>
                                <div class="readCount">2457945</div>
                              </div>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.szfish" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title" style="margin-left:130px">香辣水煮鱼</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo" style="margin-top:50px">
                                  <img :src="assets.ssy" alt="" class="photo" style="margin-left:10px">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">杜鹃花美食</span>
                                </div>
                                <div class="readCount">1478224</div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.zhuti" alt="" style="height: calc((100vw - 20px) * 0.447761);width:100%" class="pic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">~黄豆焖猪蹄~</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo">
                                  <img :src="assets.ssy" alt="" class="photo">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">随随鱼</span>
                                </div>
                                <div class="readCount">3043143</div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.meat" alt="" style="height: calc((100vw - 20px) * 0.447761);width:100%" class="pic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title">毛氏红烧肉</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo">
                                  <img :src="assets.yde" alt="" class="photo">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">缘豆儿</span>
                                </div>
                                <div class="readCount">3347143</div>
                              </div>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.scfish" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title" style="margin-left:130px">酸菜鱼片</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo" style="margin-top:50px">
                                  <img :src="assets.cm" alt="" class="photo" style="margin-left:10px">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">抄母</span>
                                </div>
                                <div class="readCount">2457945</div>
                              </div>
                            </div>
                          </div>
                        </li>
                         <li class="item-list-pic-top">
                          <div class="pic">
                            <img :src="assets.szfish" alt="" class="item-list-bigPic">
                          </div>
                          <div class="item-list-cont">
                            <p class="item-list-cont-title" style="margin-left:130px">香辣水煮鱼</p>
                            <div class="item-list-cont-bottom">
                              <div class="item-list-cont">
                                <div class="userInfo" style="margin-top:50px">
                                  <img :src="assets.ssy" alt="" class="photo" style="margin-left:10px">
                                  <span style="font-size: 12px;font-weight: 300;color: #666;">杜鹃花美食</span>
                                </div>
                                <div class="readCount">1478224</div>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="more-text">数据加载中请稍后</div>
                  </div>
                </div>
              </div>
            </div>






            <div class="navigation footer-nav ipx-pad">
                <span class="navigation-item" @click="index()">
                <i class="iconfont1 icon-home"></i>
                <span class="navigation-item-label">首页</span>
                </span>
                <span class="navigation-item">
                 <i class="iconfont2 icon-home"></i>
                <span class="navigation-item-label nav-item-label1">发现</span>
                </span>
                <span class="navigation-item" @click="buy()">
                 <i class="iconfont3 icon-home"></i>
                <span class="navigation-item-label">购物车</span>
                </span>
                <span class="navigation-item" @click="list()">
                 <i class="iconfont4 icon-home"></i>
                <span class="navigation-item-label">订单</span>
                </span>
                <span class="navigation-item" @click="mine()">
                 <i class="iconfont5 icon-home"></i>
                <span class="navigation-item-label">我的</span>
                </span>
            </div>
        </div>
    </div>








    
</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#foodlist {
  .category-section {
    padding-bottom: 51px;
    .tab-bar-box {
      height: 50px;
      overflow-y: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 501;
      .tab-bar {
        text-align: center;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        line-height: 50px;
        background-color: #fff;
        overflow-x: auto;
        .tab-bar-ul {
          height: 50px;
          display: inline-block;
          text-align: center;
          .tab-bar-li {
            font-size: 16px;
            color: #333;
            padding: 15px 13px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: relative;
          }
          .on {
            color: #47b34f;
          }
          .on:after {
            content: "";
            height: 3px;
            width: 20px;
            background-color: #47b34f;
            position: absolute;
            border-radius: 5px;
            bottom: 7px;
            left: 50%;
            margin-left: -10px;
          }
        }
      }
    }
    .tab-content {
      padding-top: 50px;
      .content-item {
        height: 100%;
        .search-bar-index {
          background-color: #fff;
          padding: 3px 10px 10px;
          .search-bar-span {
            height: 34px;
            width: 100%;
            background-color: #f8f8f8;
            font-size: 14px;
            line-height: 34px;
            border-radius: 17px;
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            color: #999;
            .search-bar-text {
              position: relative;
            }
            .search-bar-text:before {
              background-image: url("http://127.0.0.1:8088/upload/search_bar_sprites.57c20493.png");
              background-repeat: no-repeat;
              background-size: 44px auto;
              content: "";
              width: 14px;
              height: 14px;
              position: absolute;
              left: -16px;
              top: 50%;
              margin-top: -6px;
              background-position: -16px -16px;
            }
          }
        }
        .panel {
          margin: 10px;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;
          .faxian-zhanwei-warp {
            display: flex;
            border-radius: 6px;
            flex-wrap: wrap;
            background-color: #fff;
            padding: 4% 3.2%;
            justify-content: space-between;
            .faxian-zhanwei-item {
              display: flex;
              width: 12.5%;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              margin: 0 7.5% 4% 0;
              .faxian-box-circle {
                width: 44px;
                height: 44px;
                border-radius: 22px;
                overflow: hidden;
              }
              .faxian-box-bottom {
                text-align: center;
                font-size: 12px;
                margin: 8px 0 0 -2px;
                width: 50.5px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                color: #555;
              }
            }
          }
        }
        .scrollLoad-box {
          padding-bottom: 50px;
        }
        .scroll-box {
          overflow-x: auto;
          .commonTitle {
            margin: 30px 10px 15px;
            color: #333;
            font-weight: 700;
            font-size: 18px;
            line-height: 22px;
          }
          .item-list {
            padding: 0 10px;
            list-style: none;
            .item-list-pic-top {
              background-color: #fff;
              border-radius: 6px;
              border: none;
              margin: 10px 0;
              clear: both;
              width: 100%;
              .pic {
                width: 100%;
                border-radius: 6px 6px 0 0;
                border: none;
                position: relative;
                .item-list-bigPic {
                  height: 132px;
                  width: 132px;
                  border: none;
                  float: left;
                  border-radius: 6px 0 0 6px;
                }
                .item-list-back-img {
                  border-radius: 6px 6px 0 0;
                  border: none;
                  background-color: #f4f4f4;
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: cover;
                }
              }
              .item-list-cont {
                padding: 10px;
                // display: flex;
                //  height: 112px;
                // flex-direction: column;
                .item-list-cont-title {
                  margin-bottom: 15px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  font-weight: 700;
                  color: #333;
                  max-height: 42px;
                  line-height: 20px;
                }
                .item-list-cont-bottom {
                  flex: 1 1;
                  flex-grow: 1;
                  flex-shrink: 1;
                  flex-basis: 0%;
                  align-items: flex-end;
                  .userInfo {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 200px;
                    .photo {
                      height: 20px;
                      width: 20px;
                      margin-right: 5px;
                      border: none;
                      float: left;
                    }
                  }
                  .readCount {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #555;
                    margin-top: -19px;
                    margin-left: 230px;
                  }
                  .readCount:before {
                    content: "";
                    background: url("http://127.0.0.1:8088/upload/eye.png")
                      no-repeat;
                    background-size: 100%;
                    height: 13px;
                    width: 13px;
                    float: left;
                    margin: 3px 3px 3px 10px;
                  }
                }
              }
            }
          }
        }
        .more-text {
          font-size: 16px;
          line-height: 15px;
          padding: 15px 0;
          color: #666;
          text-align: center;
        }
      }
    }

    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      z-index: 1001;
      align-items: center;
      display: flex;
    }
    .navigation {
      align-items: center;
      background-image: linear-gradient(
        180deg,
        #e8e8e8,
        #e8e8e8 50%,
        transparent 0
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-color: #fff;
      height: 50px;
      .navigation-item {
        display: inline-block;
        width: 75px;
        position: relative;
        color: #555;
        flex: 1 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center;
        // color: #39ac69;
        display: flex;
        .iconfont1 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center 0;
        }
        .iconfont2 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -651px;
        }
        .iconfont3 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -100px;
        }
        .iconfont4 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -200px;
        }
        .iconfont5 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -300px;
        }
        .navigation-item-label {
          display: block;
          height: 20px;
          line-height: 17px;
        }
        .nav-item-label1 {
          color: #39ac69;
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      foodlists: []
    };
  },
  created() {
    this.getFoodLists();
  },
  methods: {
    async getFoodLists() {
      var { data, data: { result } } = await this.axios({
        methods: "get",
        url: "/foodlists"
      });
      this.foodlists = result;
    },
    follow() {
      this.$router.push({
        name: "find"
      });
    },
    recommend() {
      this.$router.push({
        name: "recommend"
      });
    },
    makeup() {
      this.$router.push({
        name: "makeup"
      });
    },
    life() {
      this.$router.push({
        name: "life"
      });
    },
    index() {
      this.$router.push({
        name: "index"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    mine() {
      this.$router.push({
        name: "mine"
      });
    }
  }
};
</script>



